<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card>
        <!-- 插入通用组件 -->
        <PageToolsCpt>
          <template v-slot:before>
            <el-button type="primary" size="small" @click="addCategories">添加分类</el-button>
          </template>
          <template v-slot:after>
            <!-- 此处添加按下Enter键事件进行搜索 -->
            <el-input v-model="searchInput" placeholder="请输入关键字" @keyup.enter.native="searchCategories">
              <el-button slot="append" icon="el-icon-search" @click="searchCategories" />
            </el-input>
          </template>
        </PageToolsCpt>
        <!-- 表格 -->
        <el-table border :data="categoriesList">
          <el-table-column prop="image" label="图片">
            <template v-slot="{ row }">
              <!--
                显示图片
                添加object-fit属性:指定元素的内容应该如何去适应指定容器的高度与宽度
               -->
              <img
                v-imgError="require('@/assets/404_images/404_cloud.png')"
                style="width: 200px;height: 200px; object-fit:cover"
                :src="row.image"
                alt=""
              >
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column prop="operation" label="操作">
            <template v-slot="{ row }">
              <el-button type="primary" size="small" @click="editCategories(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delCategories(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @current-change="pageChange"
          />
        </el-row>
      </el-card>
      <!-- 添加/修改分类对话框 -->
      <AddCategories
        ref="addCategories"
        :show-dialog.sync="showDialog"
        @updateEvent="getCategoriesList"
        @updatePageEvent="pageChange"
      />
    </div>
  </div>
</template>
<script>
import AddCategories from './components/add-categories.vue'
import { getCategoriesList, getCategoriesCount, delCategories } from '@/api/categories'
export default {
  // 添加组件
  components: {
    AddCategories
  },
  data() {
    return {
      categoriesList: [],
      showDialog: false,
      page: 0,
      total: 0,
      pageSize: 2, /* 每页请求的数量 */
      searchInput: '' /* 搜索框输入 */
    }
  },
  async created() {
    this.getCategoriesList()
  },
  methods: {
    // 搜索
    async searchCategories() {
      await this.getCategoriesList()
      const res = await getCategoriesCount({
        title_contains: this.searchInput
      })
      // console.log(res)
      this.total = res.data
    },
    // 获取分类列表
    async getCategoriesList() {
      const res = await getCategoriesList({
        _limit: this.pageSize,
        _start: this.page,
        title_contains: this.searchInput
      })
      // 获取分类数量
      const res2 = await getCategoriesCount()
      this.total = res2.data
      // console.log(64, res)
      this.categoriesList = res.data /* 渲染分类列表 */
    },
    // 分页切换的时候发送请求
    pageChange(page) {
      this.page = (page - 1) * this.pageSize
      this.getCategoriesList()
    },
    // 点击弹出对话框
    addCategories() {
      this.showDialog = true
    },
    // 删除分类
    delCategories(id) {
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delCategories(id)
        if (this.categoriesList.length === 1 && this.page !== 1) {
          this.page = this.page - this.pageSize
        }
        // 成功删除的消息
        // this.$message({
        //   type: 'success',
        //   message: '删除成功!'
        // })
        // 更新列表
        this.getCategoriesList()
        // this.pageChange()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑分类
    editCategories(id) {
      this.showDialog = true
      this.$refs.addCategories.getCategoriesDetail(id)
    }
  }
}
</script>
<style>

</style>
